<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>导航</title>
    <link rel="stylesheet" href="/layui/css/layui.css"/>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin layui-bg-cyan">

    <div class="layui-header layui-bg-cyan">
        <div class="layui-logo layui-bg-blue">星辰</div>
        <ul class="layui-nav layui-bg-cyan layui-layout-left" lay-filters="">
            <!--设定layui-this来指向当前页面分类。-->
            <li class="layui-nav-item layui-this"><a href="">首页</a></li>
            <li class="layui-nav-item">
                <a href="">活动<span class="layui-badge">6</span></a>
            </li>
            <li class="layui-nav-item ">
                <a href="">个人中心<span class="layui-badge-dot"></span></a>
            </li>
            <li class="layui-nav-item">
                <a href="javaScript:;">解决方案</a>
                <dl class="layui-nav-child">
                    <dd><a href="">移动模块</a></dd>
                    <dd><a href="">后台模版</a></dd>
                    <dd><a href="">电商平台</a></dd>
                </dl>
            </li>
        </ul>
        <ul class="layui-nav layui-bg-cyan layui-layout-right" lay-filters="">
            <li class="layui-nav-item">
                <a href=""><img src="http://t.cn/RCzsdCq" class="layui-nav-img">我</a>
                <dl class="layui-nav-child">
                    <dd><a href="javascript:;">修改信息</a></dd>
                    <dd><a href="javascript:;">安全管理</a></dd>
                    <dd><a href="javascript:;">退了</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item"><a href="">社区</a></li>
            <li class="layui-nav-item" lay-unselect>刷新</li>
        </ul>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scorll">
            <ul class="layui-nav layui-nav-tree" lay-filter="">
                <!--垂直导航需要追加class：layui-nav-tree 侧边导航需要追加class：layui-nav-tree layui-nav-side-->
                <!-- 侧边导航: <ul class="layui-nav layui-nav-tree layui-nav-side"> -->
                <li class="layui-nav-item layui-nav-itemed">
                    <a href="javascript:;">默认展开</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;">选项1</a></dd>
                        <dd><a href="javascript:;">选项2</a></dd>
                        <dd><a href="">跳转</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">解决方案</a>
                    <dl class="layui-nav-child">
                        <dd><a href="">移动模块</a></dd>
                        <dd><a href="">后台模版</a></dd>
                        <dd><a href="">电商平台</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item"><a href="">产品</a></li>
                <li class="layui-nav-item"><a href="">大数据</a></li>
            </ul>
        </div>
    </div>

    <div class="layui-body">
       <!-- <div style="padding: 15px;">内容主体区域</div>-->
        <table class="layui-table">
            <colgroup>
                <col width="150">
                <col width="200">
                <col>
            </colgroup>
            <thead>
            <tr>
                <th>昵称</th>
                <th>加入时间</th>
                <th>签名</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>贤心</td>
                <td>2016-11-29</td>
                <td>人生就像是一场修行</td>
            </tr>
            <tr>
                <td>许闲心</td>
                <td>2016-11-28</td>
                <td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
            </tr>
            </tbody>
        </table>
    </div>
    <div class="layui-footer">
        <!-- 底部固定区域 -->
        © layui.com - 底部固定区域
    </div>
</div>
<script src="/layui/layui.js"></script>
<script>
    layui.use('element',function () {
        var element = layui.element;
    });
</script>
</body>
</html>